<template>
  <x-fixed v-if="visible && pageDetail" fixed background="transparent" direction="bottom">
    <view class="x-fixed-discount">
      <view class="_content">
        <view v-if="countdownData" class="_timeout">
          <view class="_em">{{ countdownData.minute }}</view>
          <view class="_span">:</view>
          <view class="_em">{{ countdownData.second }}</view>
          <view class="_span">:</view>
          <view class="_em">
            <view class="_millisecond">
              <view class="_millisecond-list">
                <text v-for="item in numberList" :key="item" class="_text">{{item}}</text>
              </view>
            </view>
          </view>
          <view class="_tips">后结束</view>
        </view>

        <view class="_goods" @click="headerToAdvertising">
          <view class="_pic">
            <x-image :src="formatOss(pageDetail.pageMainPic)" />
          </view>
          <view class="_info">
            <view class="_title line-clamp-2">{{ pageName }}</view>
            <view class="_tools">
              <view class="_price">
                ￥{{ productPrice }}
                <view class="_tag">券后价</view>
              </view>
              <view class="_button">立即抢购</view>
            </view>
          </view>
        </view>
      </view>

      <view class="_close" @click="handleClose">
        <x-icon name="icon-003" size="50" color="#9B9B9B"/>
      </view>
    </view>

    <x-countdown
      :time="600000"
      auto
      @finish="handleClose"
      @change="handleCountdownChange"
     />
  </x-fixed>
</template>

<script>
import XImage from '@/components/x-image';
import XFixed from '@/components/x-fixed';
import XIcon from '@/components/x-icon';
import XCountdown from '@/components/x-countdown';

export default {
  name: 'XFixedDiscount',
  components: {
    XImage,
    XFixed,
    XIcon,
    XCountdown
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    pageId: {
      type: String,
      default: ''
    },
    primaryPageId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      numberList: ['99', '86', '75', '63', '54', '43', '32', '21', '11', '00'],
      countdownData: null,
      pageDetail: null,
      couponList: null
    };
  },
  computed: {
    superSubsidyModule() {
      try {
        if (this.pageDetail) {
          const moduleList = this.pageDetail.moduleList || [];
          const find = moduleList.find(item => item.moduleName === 'superSubsidy');
          if (find && find.moduleStatus) {
            return JSON.parse(find.moduleData);
          } else {
            return null;
          }
        } else {
          return null;
        }
      } catch (e) {
        return null;
      }
    },
    aggregatePageModule() {
      try {
        if (this.pageDetail) {
          const moduleList = this.pageDetail.moduleList || [];
          const find = moduleList.find(item => item.moduleName === 'aggregatePage');
          if (find && find.moduleStatus) {
            return JSON.parse(find.moduleData);
          } else {
            return null;
          }
        } else {
          return null;
        }
      } catch (e) {
        return null;
      }
    },
    // 聚合页优惠
    discountAmount() {
      return this.aggregatePageModule?.discountAmount ? this.aggregatePageModule.discountAmount : 0;
    },
    superSubsidyAmount() {
      return this.superSubsidyModule?.value ? this.superSubsidyModule.value : 0;
    },
    // 最优优惠券信息
    skuCouponInfo() {
      const couponList = this.couponList || [];
      const productPrice = this.$tools.formatNumber(this.pageDetail?.pagePrice);
      return this.$tools.matchBestCoupon(couponList, productPrice);
    },
    // 最终优惠金额
    finalDiscountAmount() {
      let amount = 0;
      if (this.isPrimaryPage) {
        if (this.superSubsidyAmount) {
          amount = this.superSubsidyAmount;
        } else {
          amount = this.skuCouponInfo?.couponAmount || 0;
        }
      } else {
        if (this.discountAmount) {
          amount = this.discountAmount;
        } else if (this.superSubsidyAmount) {
          amount = this.superSubsidyAmount;
        }
      }
      return amount;
    },
    productPrice() {
      if (this.pageDetail) {
        let price = this.pageDetail.pagePrice;
        price -= this.finalDiscountAmount;

        return price <= 0 ? 0.01 : this.$tools.formatNumber(price);
      } else {
        return '';
      }
    },
    pageName() {
      return this.pageDetail?.pageName;
    },
    isPrimaryPage() {
      return !!this.primaryPageId;
    }
  },
  created() {
    this.getDetail();
  },
  methods: {
    getDetail() {
      // 展示主推荐商品信息
      this.$http({
        error: false,
        url: '/product/page/app/detail',
        method: 'get',
        data: {
          pageId: this.isPrimaryPage ? this.primaryPageId : this.pageId
        }
      }).then(res => {
        this.pageDetail = res.data;
        this.getCouponList();
      });
    },
    getCouponList() {
      const { id, storeId, productId } = this.pageDetail;
      this.$http({
        url: '/marketing/user/coupon/list/for/product',
        method: 'get',
        login: true,
        error: false,
        report: false,
        data: {
          pageId: id,
          storeId,
          productId
        }
      }).then(res => {
        this.couponList = res.data;
      });
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 200);
    },
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleCountdownChange(res) {
      this.countdownData = res;
    },
    headerToAdvertising() {
      if (this.isPrimaryPage) {
        // 前往投放页对应的好物推荐列表页
        const params = {
          pageId: this.pageId,
          source: 1025
        };
        const query = this.$tools.object2param(params);
        uni.navigateTo({
          url: `/packages/swiper/index?${query}`
        });
      } else {
        const params = {
          pageId: this.pageId,
          source: 1025
        };
        const query = this.$tools.object2param(params);
        uni.navigateTo({
          url: `/pages/advertising/index?${query}`
        });
      }

      this.handleClose();
    }
  }
};
</script>

<style lang="scss" scoped>
  .x-fixed-discount{
    padding: 120px 30px 30px; position: relative;
    ._close{ position: absolute; right: 20px; top: 0;}
    ._content{ background: linear-gradient(180deg, #FF8C5A 0%, #D21B1B 100%); border-radius: 20px; padding: 70px 16px 32px; position: relative;}
    ._timeout{
      width: 422px; height: 88px; background: #EB5547; border-radius: 16px; position: absolute; left: 50%; top: -44px; transform: translate3d(-50%, 0, 0); display: flex; align-items: center; justify-content: center; text-align: center; color: #fff;
      ._em{ width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #FFF4FB 0%, #FFADB5 100%); border-radius: 6px; color: #DA0002; font-size: 30px;}
      ._span{ padding: 0 10px;}
      ._tips{ font-size: 30px; padding-left: 10px;}
    }
    ._millisecond{
      overflow: hidden; height: 1em; line-height: 1;
      ._millisecond-list{
        display: flex; flex-direction: column;
        animation: frames 1s steps(10) infinite;
      }
      ._text{ display: block; overflow: hidden;}
    }
    ._goods{
      background: #fff; padding: 16px; border-radius: 16px; display: flex;
      ._pic{ width: 150px; height: 150px; overflow: hidden; border-radius: 12px;}
      ._info{ flex: 1; padding-left: 16px;}
      ._title{ color: #333333; font-size: 30px;}
      ._tools{ display: flex; align-items: center;}
      ._price{ color: #DA0100; font-size: 40px; flex: 1; display: flex; align-items: center;}
      ._tag{ font-size: 24px; color: #fff; background-color: #F44846; border-radius: 20px 20px 20px 0; padding: 2px 10px; margin-left: 10px;}
      ._button{ width: 160px; height: 60px; line-height: 60px; text-align: center; background: linear-gradient(180deg, #FFE499 0%, #FFA845 100%); border-radius: 30px; font-size: 30px; color: #870A0B;}
    }
  }
  @keyframes frames {
    from {
      transform: translateY(0);
    }

    to {
      transform: translateY(-10em);
    }
  }
</style>
